<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
  <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-rx@6.0.0/dist/vue-rx.js"></script>

</head>

<body>
  <div id="app">
    <div>{{ count }}</div>

    <!-- simple usage -->
    <button v-stream:click="plus$">Add on Click</button>

    <button v-stream:click="{ subject: plus$, data: minusDelta1, options:{once:true} }">Add on Click (Option once:true)</button>

    <!-- you can also stream to the same subject with different events/data -->
    <button v-stream:click="{ subject: minus$, data: minusDelta1 }" v-stream:mousemove="{ subject: minus$, data: minusDelta2 }">
      Minus on Click &amp; Mousemove
    </button>

    <pre>{{ $data }}</pre>

    <my-button v-stream:click="plus$"></my-button>
  </div>

  <script>
    const {
      merge
    } = rxjs
    const {
      map,
      pluck,
      startWith,
      scan
    } = rxjs.operators
    new Vue({
      el: '#app',
      data() {
        return {
          minusDelta1: -1,
          minusDelta2: -1
        }
      },
      components: {
        myButton: {
          template: `<button @click="$emit('click')">MyButton</button>`
        }
      },
      created() {
        //Speed up mousemove minus delta after 5s
        setTimeout(() => {
          this.minusDelta2 = -5
        }, 5000)
      },
      // declare dom stream Subjects
      domStreams: ['plus$', 'minus$'],
      subscriptions() {
        return {
          count: merge(
            this.plus$.pipe(map(() => 1)),
            this.minus$.pipe(pluck('data'))
          ).pipe(
            startWith(0),
            scan((total, change) => total + change)
          )
        }
      }
    })
  </script>
</body>

</html>